<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-05-12 10:47:09
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-20 17:52:11
 * @FilePath: \nien-vue3-admin\src\views\myMission\components\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog v-model="visibel" :title="title" destroy-on-close>
    <el-tabs type="border-card">
      <el-tab-pane label="业务单据">
        <suspense>
          <div>
            <component
              :is="currentComponent"
              ref="businessForm"
              :data="data.businessParam"
              :disabled="disabled"
            ></component>
            <slot name="default"></slot>
          </div>
          
          <template #fallback>
            <div>
              正在加载业务数据,请稍后...
            </div>
          </template>
        </suspense>
      </el-tab-pane>
      <el-tab-pane label="流程进度">
        <el-table :data="data.historyTaskVoList">
          <el-table-column
            v-for="item in columnList"
            :key="item.prop"
            v-bind="item"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
<script lang='ts' >

import { computed, defineAsyncComponent, ref } from 'vue'

const components = import.meta.glob('../businessHandling/processApplication/components/*.vue')
/* 防止命名问题，组件名转小写 */
const transLowerCase = (files) => {
  const transMap = {}
  for (const key in files) {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
      transMap[key.replace(/(.*\/)*([^.]+).*/ig, ($1, $2, $3) => String($3).toLocaleLowerCase())] = defineAsyncComponent(files[key])
    }
  }
  return transMap
}
const componentMap = transLowerCase(components)
export default {
  components: {
    ...componentMap,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const emits = context.emit
    const visibel = computed({
      get() {
        const visible = props.visible
      
        return visible
      },
      set() {
        emits('update:visible')
      },
    })
    const componentOptions = {
      process_1: 'newcustomer',
    }
    const currentComponent = computed(() => componentOptions[props.data.processKey])
    const businessForm = ref(null)
    return {
      visibel,
      currentComponent,
      businessForm,
    }
  },
  data() {
    return {
      columnList: [
        { label: '任务名称', prop: 'taskName' },
        { label: '办理人', prop: 'assignee' },
        { label: '审批意见', prop: 'approveRemark' },
        { label: '结束时间', prop: 'endTime', minWidth: '120' },
        { label: '状态',
          prop: 'approve',
          formatter: (row) => {
            let text = null
            switch (row.approve) {
              case '0':
                text = '已通过'
                break
              case '1':
                text = '不同意'
                break
              default:
                text = '待审批'
            }
            return text
          } },
        { label: '任务名称', prop: 'taskName' },
      ],
    }
  },
}

</script>
